<template>
	<view>
		<u-navbar title="流水明细" back-icon-color="#fff" :is-back="true" :border-bottom="false" title-color="#fff" :background="navBackground"></u-navbar>
		<view class="list">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="date">{{item.createtime}}</view>
				<view class="info u-flex">
					<view class="no">{{item.memo}}</view>
					<view class="money">{{item.money}}</view>
				</view>
			</view>
		</view>
		
		<view style="padding-top: 30vh;" v-if="list.length == 0">
			<u-empty text="暂无相关信息" mode="order"></u-empty>
		</view>
		<u-loadmore :status="status" v-else-if="page > 1"/>
		
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				list:[],
				status:'loading'
			}
		},
		methods: {
			getList(){
				this.status = 'loading'
				this.$u.api.moneyLog({
					page:this.page,
					limit:15,
					type:'balance'
				}).then(res=>{
					this.list = this.page == 1 ? res.data : this.list.concat(res.data)
					this.status = res.last_page > res.current_page ? 'loadmore' : 'nomore'
					uni.stopPullDownRefresh()
				})
			}
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.page = 1
			this.getList()
		},
		onReachBottom() {
			if('loadmore' == this.status){
				this.page ++
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
	// 记录
	.list{
		padding:0 30rpx;
		.item{justify-content: space-between;font-size: 26rpx;padding: 30rpx 0;border-bottom: 1rpx solid #eee;color: #111;
			&:last-child{border-bottom: 0;}
			.date{padding-bottom: 20rpx;}
			.info{font-weight: bold;justify-content: space-between;
				.no{word-break: break-all;}
				.money{white-space: nowrap;}
			}
		}
	}
</style>
